<!--
 * @Author: GKN
 * @Date: 2023-09-01 10:42:44
 * @LastEditTime: 2024-01-22 16:25:50
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\home\special_info.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="main mainPadding p-t" style="background: #fff;">
        <div class="max-w">
        <listInfo :source="info&&info.source" :time="info&&info.startTm" >
            <template v-slot:content>
                <div class="f-title-26 MarT12" style="text-align: center;">
                    {{ info&&info.name }}
                </div>
                <div class="withFull" v-if="info&&!info.fileType">
                    <div class="ad-view MarT12" v-if="info&&info.thumb" style="width: 100%;height: auto;">
                        <img style="width: 100%;" :src="proxy.$api.prefix_img+info.thumb" alt="">
                    </div>
                    <div class="MarT12 font-content-18" v-html="info&&info.cont"></div>
                </div>
                <div class="withFull" v-if="info&&info.fileType==3">
                    <div class="ad-view MarT12" v-if="info&&info.fileUrl" style="width: 100%;height: 500px;background: #333;">
                        <!-- <vue3VideoPlay width="100%" height="500px" :src="urlArr.vodUrl+info.fileUrl" :autoPlay="false" :control="false"/> -->
                        <video 
                            controls 
                            muted 
                            loop 
                            style="object-fit: center;width:100%;height: 100%;"
                            >
                            <source 
                            :src="urlArr.vodUrl+info.fileUrl"
                            type="video/webm" 
                            />
                            </video>
                    </div>
                    <div class="MarT12 font-content-18" v-html="info&&info.cont"></div>
                </div>
                <div style="height:auto;" v-if="info&&info.fileType==1">
                    {{ xsrc }}
                    <iframe  id="iframe" :src="xsrc" frameborder="0" loading="lazy" width="100%" style="max-width:100%;min-height:3000px;"></iframe>
                </div>
                    
                <canvas v-if="info&&info.fileType==2" id="pdf-canvas"></canvas>
            </template>
        </listInfo>
        <!-- <Card1 title="精彩推荐" :more="false" style="margin-top:57px;">
            <template v-slot:main1>
                <el-row :gutter="20">
                    <el-col :span="6" v-for="item in list" :key="item">
                        <div class="item">
                            <div class="img border-r6">
                                <img class="ad-img" :src="item.img" alt="">
                            </div>
                            <div style="padding-top:18px;">
                                <div class="font-title">{{ item.title }}</div>
                                <div class="font-content omit-2">{{ item.desc }}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </template>
        </Card1> -->
        <el-dialog
            v-model="dialogVisible"
            title="登录提示"
            width="20%"
            :before-close="handleClose"
        >
            <span>请先登录</span>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="btn1">取消</el-button>
                <el-button type="primary" @click="btn2">
                确认
                </el-button>
            </span>
            </template>
        </el-dialog>
        </div>
    </div>
  </template>
  
  <script setup>
    import { ref,reactive, onMounted,getCurrentInstance } from "vue";
    const { proxy } = getCurrentInstance();
    import CryptoJS from 'crypto-js';
    import { useRoute, useRouter } from "vue-router";
    const Router = useRouter();
    import listInfo from '../components/listInfo.vue';
    import Card1 from '../components/card1.vue';
    // import mammoth from "mammoth";
    const dialogVisible = ref(false)
    const info = ref(null)
    const isToken=()=>{
        const loginData = JSON.parse(localStorage.getItem( 'loginData' ))
        if(!loginData){
            dialogVisible.value = true
        }
    }
    isToken()
    const urlArr=ref({
        fileUrl:'',
        imgUrl:'',
        vodUrl:'',
    })
    const get_resource =()=>{
        proxy.$http.request(proxy.$api.get_resource,'get',{},false, function (res) {
            if(res&&res.data){
                // imgUrl.value = res.data.data.imgUrl
                urlArr.value = res.data.data
            }
        })
    }
    get_resource()
    const btn1=()=>{
        dialogVisible.value = false
        Router.go(-1)
    }
    const btn2=()=>{
        dialogVisible.value = false
        Router.push('/login');
    }
    // 导航参数
    const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob,'query')
      // 面包屑
      const breadcrumb_list = [{name:'首页',path:'/'},{name:query.title,path:query.path},{name:'正文'}]
      const list = ref([
        {img:'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg',title:'精彩推荐',desc:'精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐'},
        {img:'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg',title:'精彩推荐',desc:'精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐'},
        {img:'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg',title:'精彩推荐',desc:'精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐'},
        {img:'https://www.cnr.cn/2022/images/xingzhen0620/guizhou.jpg',title:'精彩推荐',desc:'精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐精彩推荐'},
      ])
      const url = ref('')
      const xsrc = ref('')
      const getInfo=()=>{
        proxy.$http.request(proxy.$api.topicChild+'/'+query.id,'get',{},false, function (res) {
            if(res&&res.data){
                if(res.data.code!=0){
                    proxy.$comJs.msg('',res.data.msg,3)
                }else{
                    info.value = res.data.data
                    
                    if(res.data.data.fileType == 1){
                        url.value = 'https://file.xdqycx.com/'+res.data.data.fileUrl
                        var file = url.value;
                        //XDOC文档预览服务地址
                        var xurl = "​https://view.officeapps.live.com/op/view.aspx?src="+file;
                        //传入文档地址
                       
                        xsrc.value = xurl;
                        loading.value = false
                    }
                    if(res.data.data.fileType == 2){
                        const pdfUrl = 'https://file.xdqycx.com/'+res.data.data.fileUrl
                        pdfjsLib.getDocument(pdfUrl).promise.then(pdf => {
                        const pagesCount = pdf.numPages;
                        for (let i = 1; i <= pagesCount; i++) {
                            pdf.getPage(i).then(page => {
                            const canvas = document.getElementById('pdf-canvas');
                            const context = canvas.getContext('2d');
                            const viewport = page.getViewport({ scale: 1 });
                            canvas.height = viewport.height;
                            canvas.width = viewport.width;
                            page.render({
                                canvasContext: context,
                                viewport: viewport
                            }).promise.then(() => {
                                const imgUrl = canvas.toDataURL("image/png");
                            });
                            });
                        }
                        loading.value = false
                        });
                    }
                }
            }
        })
    }
    getInfo()
  </script>
  
  <style lang='less' scoped>
  .item{
    height: 260px;
    .img{
        height: 164px;
        width: 100%;
    }
  }
  </style>
  
